<template>
  <el-dialog title="获取坐标" class="selectMap" :visible.sync="isDial" width="900px">
    <div class="amap-page-container">
      <el-amap-search-box
        class="search-box"
        :search-option="searchOption"
        :on-search-result="onSearchResult"
        size="mini"
      ></el-amap-search-box>
      <el-amap vid="amapDemo" :center="lngLat" :zoom="zoom" class="amap-demo" :events="events">
        <el-amap-marker :position="lngLat"></el-amap-marker>
      </el-amap>
    </div>
    <span slot="footer" class="dialog-footer">
        <span class="fl">点击地图获取经纬度数据</span>
        <el-input placeholder="请输入内容" size='mini' v-model="JSON.stringify(lngLat)" :disabled="true" style="width:200px;margin-right: 10px"> </el-input>
        <el-button type="primary" @click="saveMap" size="mini">保 存</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    let that = this;
    return {
      isDial: false,
      searchOption: {
        city: "杭州",
        citylimit: false
      },
      zoom: 12,
      center: [121.538162, 31.20508],
      address: "",
      events: {
        //地图点击事件
        click(e) {
          let { lng, lat } = e.lnglat;
          that.lngLat = [lng, lat];
        }
      },
      lngLat: [120.1275, 30.27192]
    };
  },
  created() {
    let that = this;
    this.$root.$on("selectMap", data => {
      console.log(data);
      that.isDial = true;
    });
  },
  methods: {
    onSearchResult(pois) {
      let info = pois[0];
      let lngLat = [info.lng, info.lat];
      this.lngLat = lngLat;
      this.zoom = 15;
    },
    saveMap(){
        this.isDial=false
        let lngLat=JSON.stringify(this.lngLat)
        this.$root.$emit("addPB",'map',lngLat)
    }
  }
};
</script>
<style lang="less" scoped>
.selectMap{
    text-align: left;
    .fl{
        float: left;
        font-size: 12px;
        color: #999;
        padding-top: 10px;
    }
}
.amap-demo {
  height: 500px !important;
  width: 100%;
}
.search-box {
  position: absolute;
  top: 25px;
  left: 20px;
}
.amap-page-container {
  position: relative;
  
}
</style>
